(function(){
	var tm ='<ul class="page-bar">'+
		'<li > 共 {{pagerData.page.total}} 条 </li >'+	
		'<li v-if="pagerData.page.total>0"><a v-on:click="btnclick(1)">&lt;&lt;</a></li>'+
		'<li v-if="pageCurrent>1"><a v-on:click="btnclick(pageCurrent-1)">&lt;</a></li>'+
		'<li v-for="index in indexs"  v-bind:class="{ active: pageCurrent == index}">'+
		'<a v-on:click="btnclick(index)">{{ index }}</a>'+
		'</li>'+
		'<li v-if="pageCurrent+2<pagerData.page.pages && indexs[indexs.length-1] < pagerData.page.pages" class="elps"><a>...</a></li>'+
		'<li v-if="pageCurrent+2<pagerData.page.pages && indexs[indexs.length-1] < pagerData.page.pages">'+
		'<a v-on:click="btnclick(pagerData.page.pages)">{{ pagerData.page.pages }}</a>'+
		'</li>'+
		'<li v-if="pageCurrent!=pagerData.page.pages && pagerData.page.pages != 0"><a v-on:click="btnclick(pageCurrent+1)">&gt;</a></li>'+
		'<li v-if=" pagerData.page.pages != 0"><a v-on:click="btnclick(pagerData.page.pages)">&gt;&gt;</a></li>'+
		
		'<li v-if="pagerData.page.total>0"><span class="form-inline">'+
		'<select class="form-control" v-model="pagesize" number>'+
		' <option v-for="item in pagerData.page.arrPageSize" :value="item">{{item+"条/页"}}</option>'+
		'</select>'+
		'</span></li >'+
		
		'<li v-if="pagerData.page.total>0"><span class="form-inline">跳至&nbsp;'+
		'<input type="text" class="form-control" v-model="pageCurrent" v-on:blur="yzPage" v-on:click="getMypageCurrent" @keyup.enter="" />'+
		'&nbsp;页</span></li >'+
		'</ul>';
	var navBar = Vue.extend({
		template: tm,
		props:{
            pagerData:{
				default:function(){
					return{
						page:{
							//pageSize:10, 分页大小
							//arrPageSize:[10,20,30,40], 分页数
							//pageNum:1,当前页面
							//pages:0,总分页数
							//total:0 记录总数
						}
					}
				}
				
			},
			callback: {
		        default: function() {
		             return function callback() {
		                 // todo
		             }
		         }
		     }
		},
		data: function(){
			return{
				mypageCurrent:1//当前页
			}
		},
		computed: {
			indexs: function(){
				var currentPage=parseInt(this.pagerData.page.pageNum);
				var left = 1;
				var right = this.pagerData.page.pages;
				var ar = [] ;
				if(this.pagerData.page.pages>= 5){
					if(currentPage > 3 && currentPage < this.pagerData.page.pages-1){
						left = currentPage - 3;
						right = currentPage +1;
					}else{
						if(currentPage<=3){
							left = 1;
							right = 5;
						}else{
							right = this.pagerData.page.pages;
							left = this.pagerData.page.pages -4;
						}
					}
				}
				while (left <= right){
					ar.push(left);
					left ++
				}
				return ar
			},
			pagesize:{
				get:function(){
					return this.pagerData.page.pageSize;
				},
				set:function(value){
					this.pagerData.page.pageSize = value;
					this.pagerData.page.pageNum = 1;
					this.callback(1)
				}
			},
			pageCurrent:{
				get:function(){
					return this.pagerData.page.pageNum;
				},
				set:function(value){
					this.pagerData.page.pageNum = value;
					 if(/^[1-9]\d*$/.test(value)==true){
						 if(Number(value)<=this.pagerData.page.pages){
							 this.callback(value)
						 }
					 }
				}
			}
		},
		methods: {
			btnclick: function(page){
				 this.callback(page);
				 this.mypageCurrent = page;
			},
		   yzPage:function(){
	        	 if(/^[1-9]\d*$/.test(this.pageCurrent)==false){
	        		 this.pageCurrent =this.mypageCurrent;
	        	 }else{
	        		 if((Number(this.pageCurrent)<=0)||(Number(this.pageCurrent)>this.pagerData.page.pages)){
	        			 this.pageCurrent =this.mypageCurrent;
	        		 }
	        	 }
	        	
	         },
	         getMypageCurrent:function(){
	        	this.mypageCurrent = this.pageCurrent;
	         }
		}
	});
	window.vuePage = navBar
	
})();
